<!--
 * @Description: 团购价展示弹窗（一卡通商品专区）
 * @Author: Li Yujie
 * @Date: 2020/01/12
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2020/01/12
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="团购价格"
            :visible.sync="dialogVisible"
            width="900px"
            :close-on-click-modal="false"
        >
            <discount-active-list
                :list="tableData"
                v-if="tableData.length"
            />
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="dialogVisible = false"
                >
                    我知道了
                </el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>
import discountActiveList from './discount-active-list';

export default {
    name: 'GroupPriceDialog',
    data() {
        return {
            dialogVisible: false,
            tableData: []
        };
    },
    components: {
        discountActiveList
    },
    mounted() {
    },
    methods: {
        /**
         * @description 显示弹窗
         * @param data
         */
        show(data = []) {
            this.tableData = data;
            this.dialogVisible = true;
        },
        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog {
        margin-top: 15vh !important;

        .el-dialog__header {
            padding-top: 10px;
            box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;

            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }

            .el-icon-close:before {
                color: rgb(194, 194, 194);
                font-size: 17px;
                font-weight: bold;
            }

            .el-dialog__headerbtn {
                top: 14px;
            }
        }

        .el-dialog__body {
            padding: 24px 24px 0;
            min-height: 150px;
            max-height: 400px;
            overflow-y: auto;
        }

        .el-textarea__inner {
            resize: none;
        }

        .el-dialog__footer {
            text-align: center;
            padding-bottom: 30px;
            margin-top: 6px;
        }
    }
}
</style>
